<template>
	<view class="form-container">
		<!-- form演示 -->
		<view class="form-group">
			<form class="form-main">
				<view class="form-group">
					<uni-section title="选择砂芯设备" type="line"></uni-section>
					<view class="example-body">
						<combox-search label="砂芯设备" labelWidth="100px" emptyTips="无匹配选项" :isJSON="true"
							:keyName="keyNameCode" :candidates="candidatesDev" placeholder="选择砂芯设备"
							@getValue="getValue($event,'dev')">
						</combox-search>
					</view>
				</view>
				<view class="form-group">
					<uni-section title="选择生产物料信息" type="line"></uni-section>
					<view class="example-body">
						<combox-search label="生产物料信息" labelWidth="100px" emptyTips="无匹配选项" :isJSON="true"
							:keyName="keyName" :candidates="candidates" placeholder="选择生产物料信息"
							@getValue="getValue($event,'mal')">
						</combox-search>
					</view>
				</view>
				<h1>{{productionInfo}}</h1>

				<!-- 新增button按钮触发submit事件 -->
				<view class="form-group"><button class="btnsubmit" @click="deterMine" form-type="submit">确定</button>
				</view>
				<view class="form-group"><button type="default" @click="clear" form-type="reset">重置</button></view>
			</form>
		</view>
	</view>
</template>

<script>
	import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue"
	import uniSection from "@/components/uni-section.vue"
	export default {
		components: {
			comboxSearch,
			uniSection
		},
		data() {
			return {
				candidates: null,
				productionInfo: null,

				candidatesDev: [{
					devCode: '128925',
				}, {
					devCode: '128926',
				}, {
					devCode: '128927',
				}, {
					devCode: '128928',
				}],
				keyNameCode: 'devCode',
				keyName: 'materialType',
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getValue(e, type) {
				switch (type) {
					case 'dev':
						this.dev = this.candidatesDev[e].devCode;
						this.getDevInfo();
						break;
					case 'mal':
						this.mal = this.candidates[e].materialType;
						break;
					default:
						break;
				}
				console.log(e);
			},
			go() {
				uni.navigateTo({
					url: "../select/select"
				})
			},
			getDevInfo() {
				uni.request({
					/* 网页 调试接口 */
					//url: 'http://127.0.0.1:5000/push/GetDevMaterialInfo',
					//url: 'http://10.5.64.102:5000/push/GetDevMaterialInfo',
					url: 'http://10.5.51.252:5000/push/GetDevMaterialInfo',
					method: 'GET',
					sslVerify: false,
					data: {
						"devCode": this.dev,
					},
					header: {
						"Content-Type": "application/json; charset=UTF-8"
						// 'content-type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.statusCode == 200) {
							console.log("111"+res.data)
							this.productionInfo = this.dev + "号砂芯设备正在生产：" + res.data
						}
					}
				})
			},
			getInfo() {
				uni.request({
					/* 网页 调试接口 */
					//url: 'http://10.5.64.102:5000/push/GetMaterialInfo',
					url: 'http://10.5.51.252:5000/push/GetMaterialInfo',
					method: 'GET',
					sslVerify: false,
					header: {
						"Content-Type": "application/json; charset=UTF-8"
						// 'content-type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.statusCode == 200 && res.data.message == "SUCCESS") {
							uni.showToast({
								icon: 'success',
								title: '获取物料信息成功',
								mask: true,
							});
							this.candidates = res.data.resultData
						} else {
							uni.showToast({
								icon: 'error',
								mask: true,
								title: "获取物料信息失败",
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							icon: 'error',
							mask: true,
							title: "获取物料信息失败",
						})
						console.log("error===" + res.errMsg)
					}
				})
				
			},
			deterMine() {
				uni.request({
					/* 网页 调试接口 */
					//url: 'http://10.5.64.102:5000/push/UpdatProductionInfo',
					url: 'http://10.5.51.252:5000/push/UpdatProductionInfo',
					method: 'POST',
					sslVerify: false,
					data: {
						"dev": this.dev,
						"mal": this.mal,
					},
					header: {
						"Content-Type": "application/json; charset=UTF-8"
						// 'content-type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.statusCode == 200) {
							uni.showToast({
								icon: 'success',
								title: '修改成功',
								mask: true,
							});
						} else {
							uni.showToast({
								icon: 'error',
								mask: true,
								title: "修改失败",
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							icon: 'error',
							mask: true,
							title: "接口请求失败!",
						})
						console.log("error===" + res.errMsg)
					}
				})
			},
			clear() {
				this.productionInfo = null
			},
		}
	}
</script>
<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
		/* overflow: hidden; */
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		padding: 0px 12px;
		background-color: #FFFFFF;
	}

	.result-box {
		text-align: center;
		padding: 20px 0px;
		font-size: 16px;
	}
</style>
<style lang="scss">
	page {
		background-color: #EEF0F4;
		font-size: 18px;
	}

	u-button {
		float: left;
		display: inline;
	}

	.form {
		margin-top: 35rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.form-group {

		padding: 20rpx 40rpx 0rpx 40rpx;
	}

	.btnsubmit {
		margin-top: 50px;
	}

	#user-insert-line::before {
		position: absolute;
		right: 25px;
		bottom: 0;
		top: 5rem;
		left: 40px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	#name::before {
		position: absolute;
		right: 25px;
		bottom: 0;
		top: 8.8rem;
		left: 40px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
</style>
